<html>

<head>
    <title>Highcharts 负值区域</title>
    <meta charset="utf-8">
    <style>
        .container {
            width: 550px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="container"></div>
    <script src="../lib/jquery-3.5.1.min.js"></script>
    <script src="../lib/highcharts.js"></script>
    <script>
        $(function () {
            var chart = { type: 'area' };
            var title = { text: '负值区域' };
            var subtitle = { text: 'guides' };
            var xAxis = {
                categories: ['Apples', 'Oranges', "Pears", 'Grapes', 'Bananas']
            };
            var credits = {
                enabled: false
            };
            // 数据
            var series = [
                {
                    name: 'John',
                    data: [5, 3, 4, 7, 2]
                }, {
                    name: 'Jane',
                    data: [2, -2, -3, 2, 1]
                }, {
                    name: 'Joe',
                    data: [3, 4, 4, -2, 5]
                }
            ];
            var data = {
                chart: chart, title: title, subtitle: subtitle, xAxis: xAxis,
                series: series
            };
            $(".container").highcharts(data);
        });
    </script>
</body>

</html>